<!-- 开发票页面 -->
<template>
	<view class="content">
		<!-- <view class="bg">
		</view> -->
		<Header :isShowRight="false" title="发票信息" @back='back' arrowColor='#000' textColor='#000' bgColor='#fff'></Header>
		<view class="box">
			<view class="fistBox">
				<view class="flexed">
					<text>发票抬头</text>
					<view class="">
						<u-radio-group placement="row" @change="radioChange" v-model="value1">
							<view class="radioItem" v-for="(item,index) in radiolist" :key='index'>
								<u-radio activeColor="#FF8809" :label="item.label" :name='item.name' iconSize='34'
									labelSize='30' size='34' :labelColor='item.labelColor'></u-radio>
							</view>
						</u-radio-group>
					</view>
				</view>
				<template v-if='value1==1'>
					<view class="flexed">
						<text>抬头名称</text>
						<input type="text" class="input_text_right inpts" placeholder="个人/单位名称（必填）"
							placeholder-class="placeholder" v-model.trim='list.invoiceRiseName'>
					</view>
					<view class="flexed">
						<text>手机号</text>
						<input type="text" class="input_text_right" placeholder="请输入收票人手机号（必填）"
							placeholder-class="placeholder" v-model.trim='list.phone'>
					</view>
				</template>
				<template v-if="value1==2">
					<view class="flexed">
						<text>抬头名称</text>
						<input type="text" class="input_text_right inpts" placeholder="企业名称（必填）"
							placeholder-class="placeholder" v-model.trim='list.invoiceRiseName'>
					</view>
					<view class="flexed">
						<text>识别号</text>
						<input type="text" class="input_text_right" placeholder="请输入纳税人识别号（必填）"
							placeholder-class="placeholder" v-model.trim='list.identificationNo'>
					</view>
					<view class="flexed">
						<text>企业电话</text>
						<input type="text" class="input_text_right" placeholder="填写企业电话（选填）"
							placeholder-class="placeholder" v-model.trim='list.phone'>
					</view>
					<view class="flexed">
						<text>开户银行</text>
						<input type="text" class="input_text_right" placeholder="请输入开户银行名称（选填）"
							placeholder-class="placeholder" v-model.trim='list.bank'>
					</view>
					<view class="flexed">
						<text>银行账号</text>
						<input type="text" class="input_text_right" placeholder="请输入银行账号（选填）"
							placeholder-class="placeholder" v-model.trim='list.bankCard'>
					</view>
					<view class="flexed">
						<text>企业地址</text>
						<input type="text" class="input_text_right" placeholder="请输入企业地址（选填）"
							placeholder-class="placeholder" v-model.trim='list.businessAddress'>
					</view>
				</template>
				
			</view>
			<view class="secondBox">
				<view class="flexed">
					<text>发票类型</text>
					<view class="">
						<u-radio-group placement="row" @change="Change" v-model="value2">
							<view class="radioItem" v-for="(item,index) in invoiceType" :key='index'>
								<u-radio activeColor="#FF8809" :label="item.label" :name='item.name' iconSize='34'
									labelSize='30' size='34' :labelColor='item.labelColor'></u-radio>
							</view>
						</u-radio-group>
					</view>
				</view>
				<view class="flexed" v-if='value2==1'>
					<text>邮箱</text>
					<input type="text" class="input_text_right" placeholder="用于接受电子发票的邮箱（必填）"
						placeholder-class="placeholder" v-model='list.email'>
				</view>
				<view v-if='value2==2'>
					<view class="flexed">
						<text>姓名</text>
						<input type="text" class="input_text_right" placeholder="收件人姓名（必填）"
							placeholder-class="placeholder" v-model='list.receivingName'>
					</view>
					<view class="flexed">
						<text>电话</text>
						<input type="text" class="input_text_right" placeholder="收件人电话（必填）"
							placeholder-class="placeholder" v-model='list.receivingPhone'>
					</view>
					<view class="flexed">
						<text>地址</text>
						<input type="text" class="input_text_right" placeholder="收件人详细地址（必填）"
							placeholder-class="placeholder" v-model='list.receivingAddress'>
					</view>
				</view>
			</view>
			<view class="btnBox" @click='Tomake'>确认申请开票</view>
		</view>
	</view>
</template>

<script>
	import {
		orderInvoice
	} from '@/apis/apis.js'
	import Header from '@/components/c_header.vue'
	export default {
		name: "",
		components: {
			Header
		},
		props: {},
		data() {
			return {
				value1: 1,
				value2: 1,
				radiolist: [{
						label: '个人/事业单位',
						name: 1,
						labelColor: '#535353'
					},
					{
						label: '企业',
						name: 2,
						labelColor: '#ACACAC'
					}
				],
				invoiceType: [{
						label: '电子发票',
						name: 1,
						labelColor: '#535353'
					},
					{
						label: '纸质发票',
						name: 2,
						labelColor: '#ACACAC'
					}
				],
				list: {
					invoiceRiseName: '',
					phone: '',
					email: '',
					receivingName: '',
					receivingAddress: '',
					receivingPhone: '',
					identificationNo:'',
					bank:'',
					bankCard:'',
					businessAddress:''
				},
				invoiceMoney: null,
				orderIds: null,
				orderNumber: null
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			radioChange(val) {
				this.list={
					invoiceRiseName: '',
					phone: '',
					email: '',
					receivingName: '',
					receivingAddress: '',
					receivingPhone: '',
					identificationNo:'',
					bank:'',
					bankCard:'',
					businessAddress:''
				}
				this.radiolist.forEach(item => {
					if (item.name == val) {
						item.labelColor = '#535353'
					} else {
						item.labelColor = '#ACACAC'
					}
				})
			},
			Change(val) {
				this.invoiceType.forEach(item => {
					if (item.name == val) {
						item.labelColor = '#535353'
					} else {
						item.labelColor = '#ACACAC'
					}
				})
			},
			//开票校验
			validate() {
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				let myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
				//判断手机号

				if (this.list.invoiceRiseName=='') {
					uni.showToast({
						title: '请输入抬头名称',
						icon: 'none'
					})
					return
				}
				if (this.list.identificationNo==''&&this.value1==2) {
					uni.showToast({
						title: '请输入识别号',
						icon: 'none'
					})
					return
				}
				if (!reg.test(this.list.phone)&&this.value1==1) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				if(this.list.phone!==''&&this.value1==2&&!reg.test(this.list.phone)){
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				
				//电子发票或纸质发票校验
				if (this.value2 == 1) {
					//电子发票
					if (!myreg.test(this.list.email)) {
						uni.showToast({
							title: '检查邮箱是否输入正确',
							icon: 'none'
						})
						return
					}
				} else {
					//纸质发票
					if (this.list.receivingName=='') {
						uni.showToast({
							title: '请输入姓名',
							icon: 'none'
						})
						return
					}
					if (this.list.receivingAddress=='') {
						uni.showToast({
							title: '请输入地址',
							icon: 'none'
						})
						return
					}
					
					if (!reg.test(this.list.receivingPhone)) {
						uni.showToast({
							title: '请输入正确的电话',
							icon: 'none'
						})
						return
					}

				}
				return true
			},
			//确认开票
			Tomake() {
				let pass = this.validate()
				let datas = {
					invoiceMoney: this.invoiceMoney,
					invoiceRise: this.value1,
					invoiceType: this.value2,
					orderIds: this.orderIds.toString(),
					orderNumber: this.orderNumber,
					// bank: '',
					// bankCard: '',
					// businessAddress: '',
					createTime: '',
					expressName: '',
					expressNo: '',
					expressTime: '',
					// identificationNo: '',
					invoiceStatus: 1,
				}
				let data = Object.assign(datas, this.list)
				console.log(data);
				if (pass) {
					orderInvoice(data).then(res => {
						console.log(res);
						uni.navigateTo({
							url: './invoices'
						})
					})
				}
			}
		},
		mounted() {

		},
		onLoad(options) {
			console.log(options);
			this.orderIds = JSON.parse(options.ids)
			this.invoiceMoney = options.money
			this.orderNumber = this.orderIds.length
			console.log(this.orderIds);
		},
		filters: {

		},
		computed: {

		},
		watch: {

		},
		directives: {

		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #F8F8F8;
		width: 100%;
		min-height: 100vh;
        padding-bottom: 40rpx;
		.bg {
			width: 100%;
			height: 140rpx;
			padding: 76rpx 0 0 32rpx;
			background: #fff;
		}

		.box {
			width: 92%;
			margin: 38rpx auto;

			.fistBox {
				background: #FFFFFF;
				box-shadow: 0px 3px 13px 0px rgba(127, 129, 133, 0.1000);
				border-radius: 20rpx;
				margin-bottom: 32rpx;

				.flexed {
					height: 110rpx;
					margin: 0 14rpx;
					padding: 0 16rpx;
					border-bottom: 2rpx solid #F2F2F2;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.radioItem:first-child {
						margin-right: 42rpx;
					}

					&>text {
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #020202;
					}

					.inpt {

						// text-align: right;
						// float: right;
						// width: 100%;
						.placeholder {
							font-size: 30rpx;
							font-family: Source Han Sans CN;
							color: #ACACAC;
						}

						// .inpts {
						// 	width: 100%;
						// }
					}
				}

				// .flexed:nth-child(3) {
				// 	border-bottom: none;
				// }

				.placeholder {
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					color: #ACACAC;
				}
			}

			.secondBox {
				background: #FFFFFF;
				box-shadow: 0px 3px 13px 0px rgba(127, 129, 133, 0.1000);
				border-radius: 10px;

				.flexed {
					height: 110rpx;
					margin: 0 14rpx;
					padding: 0 16rpx;
					border-bottom: 2rpx solid #F2F2F2;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.radioItem:first-child {
						margin-right: 42rpx;
					}

					&>text {
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #020202;
					}

					.inpt {
						text-align: right;

						.placeholder {
							font-size: 30rpx;
							font-family: Source Han Sans CN;
							color: #ACACAC;
						}

						.inpts {
							width: 100%;
							margin-right: 100rpx;
							// border: 1rpx solid red;
						}
					}

					.placeholder {
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						color: #ACACAC;
					}
				}
			}

			.btnBox {
				width: 580rpx;
				height: 90rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 90rpx;
				margin: 108rpx auto;
				background: #194FC9;
				box-shadow: 0px 6px 8px 0px rgba(82, 163, 255, 0.3000);
				border-radius: 46rpx;
			}
		}
	}

	.input_text_right {
		text-align: right;
		width: 70%;
	}
</style>
